<template>
	<view style="background-color: #f3f3f3;width: 100%;height: 900px;">
		<view class="search">
			<view class="search_title">bawei社区团购</view>
			<view class="search_input">
				<view class="search_icon">
					<uni-icons type="search" size="20"></uni-icons>
				</view>
				<view class="search_inputs">
					<input type="text" value="" placeholder="商品" style="border: 0px;" />
				</view>
			</view>
		</view>
		<view class="shopget">
			<view class="shopgets">
				<view class="shopgets_img">
					<image src="../../static/images/shop.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="shopgets_title">
					<view class="shopgets_address">自提点：诚信超市</view>
					<view class="shopgets_time">今天下单，明天16点自提</view>
				</view>
				<view class="shopgets_huan">
					切换 &nbsp; >
				</view>
			</view>
		</view>
		<view class="swipebg">
			<view class="swiper">
				<swiper class="swipers" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true"
					:duration="500">
					<block v-for="(item,index) in swipers">
						<swiper-item>
							<image :src="item.img" style="width: 100%;height: 100%;border-radius: 10px;"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class="list">
			<view class="lists" v-for="(item,index) in list">
				<view class="lists_img">
					<image :src="item.img" style="width: 70%;height: 95%;margin-left: 15%;margin-top: 2%;"></image>
				</view>
				<view class="lists_title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="zhibo">
			<image src="../../static/images/zhibo.png" style="width: 100%;height: 100%;border-radius: 10px;"></image>
		</view>
		<view class="active">
			<view class="actives" v-for="(item,index) in actives" @click="intoactives(item,index)">
				<view class="actives_title">
					<view class="actives_da">
						{{item.name}}
					</view>
					<view class="actives_xiao">
						{{item.title}}
					</view>
				</view>
				<view class="actives_img">
					<image :src="item.img" mode="" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>

		<view class="monye">
			<view class="monyes" v-for="(item,index) in piao">
				<view class="monyess">
					<view class="monyes_title">
						<view class="monyes_price">
							￥{{item.price}}
						</view>
						<view class="monyes_prices">
							满{{item.prices}}元可用
						</view>
					</view>
					<view class="monyes_ling">
						领<br />取
					</view>
				</view>
			</view>
		</view>

		<image src="../../static/images/kefu.png"
			style="width: 50px;height: 50px;border-radius: 50%;position: fixed;z-index: 99;top: 500px;right: 20px;">
		</image>

		<view class="tu_one">
			<image src="../../static/images/tu1.png" style="width: 100%;height: 100%;border-radius: 10px;"></image>
		</view>
		<view class="tu_one">
			<image src="../../static/images/tu2.png" style="width: 100%;height: 100%;border-radius: 10px;"></image>
		</view>
		<view class="tu_one">
			<image src="../../static/images/tu3.png" style="width: 100%;height: 100%;border-radius: 10px;"></image>
		</view>

		<view class="check">
			<view class="check_left" @click="qiang()" v-if="aa">
				正在抢购
			</view>
			<view class="check_lefts" @click="qiang()" v-else>
				正在抢购
			</view>
			<view class="check_right" @click="kai()" v-if="bb">
				即将开始
			</view>
			<view class="check_rights" @click="kai()" v-else>
				即将开始
			</view>
			<view class="check_time">
				<view><text>秒杀仅剩</text></view>
				<view style="margin-top: -3px;margin-left: 10px;">
					<uni-countdown color="#FFFFFF" :showDay="false" background-color="#505050" border-color="#505050"
						:hour="2" :minute="30" :second="0"></uni-countdown>
				</view>
			</view>
		</view>
		<view class="shoplist" v-if="modules">
			<view class="content">
				<tab v-model="activeKey" :navData="scrollData" @change="tabChange" @tabClick="tabClick">
					<!-- 
			        <scroll-view scroll-y slot="slot-1" style="overflow:auto;height:300rpx">
			            1
			        </scroll-view>
			        <scroll-view scroll-y slot="slot-2" style="overflow:auto;height:300rpx">
			            2
			        </scroll-view>
			        -->
					<!-- AND -->
					<view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
						<scroll-view scroll-y height="400rpx">
							<view style="width: 100%;height: 100%;" v-if="key==0">
								<view class="shoplists" v-for="(item,index) in shoplist">
									<view class="shoplists_img">
										<image :src="item.img" style="width: 100%;height: 100%;"></image>
									</view>
									<view class="shoplists_name">
										{{item.name}}
									</view>
									<view class="shoplists_title">
										{{item.title}}
									</view>
									<view class="shoplists_person">
										<view class="person_left">
											<view class="headimg" v-for="(item,index) in headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											已抢购{{item.num}}件
										</view>
										<view class="person_right">
											人气值：<text style="color: #F0AD4E;">{{item.nums}}</text>
										</view>
									</view>
									<view class="shoplists_price">
										<view class="shoplists_prices">
											<text style="font-size: 10px;">￥</text>{{item.price}}
											<text
												style="font-size: 12px;text-decoration: line-through;color: #ccc;font-weight: 100;">￥{{item.prices}}</text>
										</view>
										<view class="shoplists_button">
											<button>加入购物车</button>
										</view>
									</view>
								</view>
							</view>

							<view style="width: 100%;height: 100%;" v-if="key==1">
								<view class="shoplists" v-for="(item,index) in shoplist2">
									<view class="shoplists_img">
										<image :src="item.img" style="width: 100%;height: 100%;"></image>
									</view>
									<view class="shoplists_name">
										{{item.name}}
									</view>
									<view class="shoplists_title">
										{{item.title}}
									</view>
									<view class="shoplists_person">
										<view class="person_left">
											<view class="headimg" v-for="(item,index) in headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											已抢购{{item.num}}件
										</view>
										<view class="person_right">
											人气值：<text style="color: #F0AD4E;">{{item.nums}}</text>
										</view>
									</view>
									<view class="shoplists_price">
										<view class="shoplists_prices">
											<text style="font-size: 10px;">￥</text>{{item.price}}
											<text
												style="font-size: 12px;text-decoration: line-through;color: #ccc;font-weight: 100;">￥{{item.prices}}</text>
										</view>
										<view class="shoplists_button">
											<button>加入购物车</button>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</tab>
			</view>
		</view>

		<view class="shoplist" v-else>
			<view class="content">
				<tab v-model="activeKey" :navData="scrollData" @change="tabChange" @tabClick="tabClick">
					<!-- 
			        <scroll-view scroll-y slot="slot-1" style="overflow:auto;height:300rpx">
			            1
			        </scroll-view>
			        <scroll-view scroll-y slot="slot-2" style="overflow:auto;height:300rpx">
			            2
			        </scroll-view>
			        -->
					<!-- AND -->
					<view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
						<scroll-view scroll-y height="400rpx">
							<view style="width: 100%;height: 100%;" v-if="key==0">
								<view class="shoplists" v-for="(item,index) in shoplist3">
									<view class="shoplists_img">
										<image :src="item.img" style="width: 100%;height: 100%;"></image>
									</view>
									<view class="shoplists_name">
										{{item.name}}
									</view>
									<view class="shoplists_title">
										{{item.title}}
									</view>
									<view class="shoplists_person">
										<view class="person_left">
											<view class="headimg" v-for="(item,index) in headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											已抢购{{item.num}}件
										</view>
										<view class="person_right">
											人气值：<text style="color: #F0AD4E;">{{item.nums}}</text>
										</view>
									</view>
									<view class="shoplists_price">
										<view class="shoplists_prices">
											<text style="font-size: 10px;">￥</text>{{item.price}}
											<text
												style="font-size: 12px;text-decoration: line-through;color: #ccc;font-weight: 100;">￥{{item.prices}}</text>
										</view>
										<view class="shoplists_button">
											<button>加入购物车</button>
										</view>
									</view>
								</view>
							</view>

							<view style="width: 100%;height: 100%;" v-if="key==1">
								<view class="shoplists" v-for="(item,index) in shoplist4">
									<view class="shoplists_img">
										<image :src="item.img" style="width: 100%;height: 100%;"></image>
									</view>
									<view class="shoplists_name">
										{{item.name}}
									</view>
									<view class="shoplists_title">
										{{item.title}}
									</view>
									<view class="shoplists_person">
										<view class="person_left">
											<view class="headimg" v-for="(item,index) in headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											<view class="headimg">
												<image src="../../static/images/head.png"
													style="width: 100%;height: 100%;"></image>
											</view>
											已抢购{{item.num}}件
										</view>
										<view class="person_right">
											人气值：<text style="color: #F0AD4E;">{{item.nums}}</text>
										</view>
									</view>
									<view class="shoplists_price">
										<view class="shoplists_prices">
											<text style="font-size: 10px;">￥</text>{{item.price}}
											<text
												style="font-size: 12px;text-decoration: line-through;color: #ccc;font-weight: 100;">￥{{item.prices}}</text>
										</view>
										<view class="shoplists_button">
											<button>加入购物车</button>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</tab>
			</view>
		</view>
	</view>
</template>

<script>
	import tab from '@/components/Mark-Tab/Tab.vue';
	export default {
		data() {
			return {
				aa:true,
				bb:true,
				modules: true,
				keys:true,
				activeKey: 0,
				swipers:[
					{img:'../../static/images/swiper.png'},{img:'../../static/images/swiper.png'}
				],
				list:[
					{img:'../../static/images/list1.png',name:'甄选鲜果'},{img:'../../static/images/list2.png',name:'新鲜蔬菜'},{img:'../../static/images/list3.png',name:'数码手机'},{img:'../../static/images/list4.png',name:'新鲜蔬菜'}
				],
				actives:[
					{name:'特价秒杀',title:'手慢无哦！',img:'../../static/images/tejia.png'},
					{name:'直播特卖',title:'现采现卖',img:'../../static/images/tejia1.png'},
					{name:'砍价活动',title:'积分兑礼品',img:'../../static/images/tejia2.png'},
					{name:'拼团活动',title:'签到有礼',img:'../../static/images/tejia3.png'}
				],
				piao:[
					{price:'1.00',prices:'10.00'},
					{price:'2.00',prices:'10.00'},
					{price:'3.00',prices:'10.00'},
					{price:'4.00',prices:'10.00'},
				],
				shoplist:[
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'}
				],
				shoplist2:[
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist1.png',name:'美国提子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'}
				],
				shoplist3:[
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:1,nums:182,price:'19.00',prices:'0.00'}
				],
				shoplist4:[
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'},
					{img:'../../static/images/shoplist2.png',name:'美国橙子500g',title:'鲜甜多汁，口口满足过瘾',num:2,nums:182,price:'19.00',prices:'0.00'}
				],
				scrollData: [{
						label: '全新',
						slot: 'slot-1'
					},
					{
						label: '新品',
						slot: 'slot-2'
					}
				]
			}
		},
		components: {
			tab
		},
		methods: {
			qiang(){
				this.modules=true
				this.aa=true
				this.bb=true
			},
			kai(){
				this.modules=false
				this.aa=false
				this.bb=false
			},
			intoactives(item,index){
				console.log(item,index,111)
				if(index==0){
					uni.navigateTo({
						url:'/pages/home/SecKill-active/SecKill-active'
					})
				}else if(index==1){
					uni.navigateTo({
						url:'broadcast/broadcast'
					})
				}else if(index==2){
					uni.navigateTo({
						url:'BarginActive/BarginActive'
					})
				}else if(index==3){
					uni.navigateTo({
						url:'/pages/home/GroupActivities/GroupActivities'
					})
				}
			},
			tabChange(e) {
				console.log(e);
			},
			tabClick(e) {
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 100%;
		height: 50px;
		background-color: #18BC37;
		display: flex;
		flex-wrap: nowrap;
	}

	.search_title {
		width: 40%;
		height: 50px;
		line-height: 50px;
		color: #fff;
		font-weight: 600;
		font-size: 18px;
		padding-left: 10px;
	}

	.search_input {
		width: 55%;
		height: 30px;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 10px;
		display: flex;
		flex-wrap: nowrap;
	}

	.search_icon {
		margin-top: 4px;
		margin-left: 6px;
	}

	.search_inputs {
		margin-top: 3px;
		margin-left: 10px;
	}

	.shopget {
		width: 100%;
		height: 40px;
		background-color: #18BC37;
	}

	.shopgets {
		width: 96%;
		height: 36px;
		background-color: #fff;
		margin-left: 2%;
		display: flex;
		flex-wrap: nowrap;
	}

	.shopgets_img {
		width: 10%;
		height: 30px;
		margin-left: 5px;
		margin-top: 3px;
	}

	.shopgets_title {
		width: 35%;
		height: 36px;
		margin-left: 5%;
	}

	.shopgets_address {
		width: 100%;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
	}

	.shopgets_time {
		width: 100%;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		color: red;
	}

	.shopgets_huan {
		width: 20%;
		height: 36px;
		line-height: 18px;
		font-size: 13px;
		color: #ccc;
	}

	.swipebg {
		width: 100%;
		height: 100px;
		background-color: #18BC37;
		border-radius: 0px 0px 20% 20%;
	}

	.swiper {
		width: 96%;
		height: 160px;
		background-color: #fff;
		margin-left: 2%;
		border-radius: 10px;
	}

	.swipers {
		width: 100%;
		height: 160px;
		background-color: #fff;
		border-radius: 10px;
	}

	.list {
		width: 96%;
		height: 100px;
		margin-left: 2%;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 70px;
		display: flex;
		flex-wrap: nowrap;
	}

	.lists {
		width: 25%;
		height: 100px;
	}

	.lists_img {
		width: 100%;
		height: 70px;
	}

	.lists_title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		text-align: center;
		color: #c1c1c1;
	}

	.zhibo {
		width: 96%;
		height: 120px;
		margin-left: 2%;
		margin-top: 2%;
		border-radius: 10px;
	}

	.active {
		width: 96%;
		height: 200px;
		margin-left: 2%;
		margin-top: 2%;
		display: flex;
		flex-wrap: wrap;
	}

	.actives {
		width: 49%;
		height: 97px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #FFF2E1;
		border-radius: 5px;
		margin-left: 3px;
	}

	.actives_title {
		width: 50%;
		height: 97px;
	}

	.actives_da {
		width: 100%;
		height: 20px;
		margin-top: 2%;
		line-height: 20px;
		text-align: center;
		color: #F0AD4E;
	}

	.actives_xiao {
		width: 100%;
		height: 20px;
		margin-top: 5px;
		line-height: 20px;
		text-align: center;
		color: #ccc;
		font-size: 13px;
	}

	.actives_img {
		width: 50%;
		height: 97px;
	}

	.monye {
		width: 96%;
		height: 100px;
		margin-top: 2%;
		margin-left: 2%;
		background-color: #fff;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}

	.monye::-webkit-scrollbar {
		display: none;
	}

	.monyes {
		width: 40%;
		height: 85px;
		margin-top: 7px;
		border-radius: 10px;
		margin-left: 7%;
		background-color: #E43D33;
		display: inline-block;
	}

	.monyess {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: nowrap;
	}

	.monyes_title {
		width: 70%;
		height: 85px;
	}

	.monyes_price {
		width: 100%;
		height: 40px;
		line-height: 70px;
		color: #fff;
		padding-left: 10px;
	}

	.monyes_prices {
		width: 100%;
		height: 40px;
		line-height: 30px;
		color: #fff;
		padding-left: 10px;
		font-size: 12px;
	}

	.monyes_ling {
		width: 30%;
		height: 85px;
		line-height: 42px;
		text-align: center;
		color: #fff;
	}

	.tu_one {
		width: 96%;
		height: 170px;
		margin-left: 2%;
		margin-top: 2%;
	}

	.check {
		width: 100%;
		height: 40px;
		margin-top: 10px;
		display: flex;
		flex-wrap: nowrap;
		line-height: 40px;
		border-bottom: 2px #18BC37 solid;
	}

	.check_left {
		width: 20%;
		height: 40px;
		line-height: 40px;
		background-color: #18BC37;
		color: #fff;
		margin-left: 2%;
		text-align: center;
		border-radius: 5px 5px 0px 0px;
	}
	
	.check_lefts {
		width: 20%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		color: #000;
		margin-left: 2%;
		text-align: center;
		border-radius: 5px 5px 0px 0px;
	}

	.check_right {
		width: 20%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		color: #000;
		margin-left: 2%;
		text-align: center;
		margin-left: 5px;
		border-radius: 5px 5px 0px 0px;
	}
	
	.check_rights {
		width: 20%;
		height: 40px;
		line-height: 40px;
		background-color: #18BC37;
		color: #fff;
		margin-left: 2%;
		text-align: center;
		margin-left: 5px;
		border-radius: 5px 5px 0px 0px;
	}

	.check_time {
		width: 45%;
		height: 40px;
		margin-left: 15%;
		font-weight: 600;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.shoplist{
		width: 100%;
		height: 100%;
	}
	
	.shoplists{
		width: 96%;
		height: 400px;
		margin-left: 2%;
	}
	
	.shoplists_img{
		width: 100%;
		height: 230px;
	}
	
	.shoplists_name{
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 18px;
		font-weight: 600;
	}
	
	.shoplists_title{
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #ccc;
	}
	
	.shoplists_person{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.person_left{
		width: 50%;
		color: #ccc;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.headimg{
		width: 10%;
		height: 31px;
		margin-top: 7px;
	}
	
	.person_right{
		width: 30%;
		margin-left: 20%;
		color: #ccc;
	}
	
	.shoplists_price{
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.shoplists_prices{
		width: 50%;
		height: 40px;
		line-height: 40px;
		color: red;
		font-weight: 600;
	}
	
	.shoplists_button{
		width: 25%;
		margin-left: 20%;
		height: 40px;
	}
	.shoplists_button button{
		width: 100%;
		height: 30px;
		margin-top: 5px;
		background-color: #18BC37;
		color: #fff;
		font-size: 14px;
		line-height: 30px;
	}
</style>
